<template>
  <div class="top-bar">
    <div></div>
    <div class="right">
      <el-popover placement="bottom" trigger="hover" width="160">
        <div style="text-align: right; margin: 0">
          <el-button type="primary" size="mini" @click="handleLogout">注销</el-button>
        </div>
        <div slot="reference">{{userInfo.username}}</div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("admin");
import { logout } from "utils/user";
export default {
  data() {
    return {
      visible: false
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {},
  methods: {
    // ...logout,
    handleLogout() {
      logout();
    }
  }
};
</script>

<style lang="scss" scoped>
.top-bar {
  height: 64px;
  width: 100%;
  background: #887777;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
}
</style>